import React, { Component } from 'react';
import { Table, Row, Col, Button, Form, Input, Tabs, Icon, Divider, Modal, notification, Select, DatePicker, Drawer, InputNumber, Cascader, Checkbox } from 'antd';
import * as APIService from '../../axios/api';
import { withRouter } from 'react-router-dom';
import ErrorBoundary from '../layout/ErrorBoundary';

import moment from 'moment';
const FormItem = Form.Item;
const { TabPane } = Tabs;
const { confirm } = Modal;
const { Option } = Select;
//弹出通知提醒框
function openNotification(type, message) {
	notification.open({
		type: type,
		message: message,
		duration: 2,
	});
};

const dateFormat = 'YYYY-MM-DD';
class TableSearch extends Component {
	state = {
		dataSource: [],
		pagination: {
			pageSize: 10,
			current: 1
		},
		loading: false,
		chooseData: '',
		options: [],
		handleType: 0,
		columns: [
			{
				title: '序号',
				render: (text, record, index) => {
					return (
						`${(this.state.pagination.current - 1) * (this.state.pagination.pageSize) + (index + 1)}`
					)
				}
			},
			{
				title: '调用url和路径',
				dataIndex: 'logAddress',
			},
			{
				title: '调用时间',
				dataIndex: 'logTime',
			},
			{
				title: '调用人',
				dataIndex: 'logUserName'
			},
			{
				title: '模块',
				dataIndex: 'logModular'
			},
			{
				title: '传入参数',
				dataIndex: 'logParameter'
			},
			{
				title: '日志类型',
				dataIndex: 'logTypeName'
			},
			{
				title: '操作',
				width: '12%',
				render: (text, record) => {
					return <span>

						<a onClick={() => this.showDeleteConfirm(record, 0)}>
							删除
						</a>

					</span>
				}
			}
		]
	};

	// componentDidMount() {
	// 	this.fetch('&pageSize=10&pageNum=1');
	// }

	componentWillUnmount() {
		this.setState = () => {
			return;
		};
	}

	//弹出删除框
	showDeleteConfirm = (data, type) => {
		const that = this;
		confirm({
			title: type === 0 ? '确认删除' + '[' + data.userName + ']？' : '确认重置密码？',
			okText: '确认',
			okType: 'warning',
			cancelText: '取消',
			onOk() {
				if (type === 0) {
					APIService.deleteUser(data.userId).then(data => {
						openNotification('success', '删除成功');

					}).catch(function (error) {
						openNotification('error', error.message);
					});
				} else {
					APIService.resetPassword(data.userId).then(data => {
						openNotification('success', '重置成功');
					}).catch(function (error) {
						openNotification('error', error.message);
					});
				}
				// that.fetch('');

			},
			onCancel() {
				console.log('Cancel');
			},
		});
	}
	// fetch = (str) => {
	// 	this.setState({ loading: true });
	// 	APIService.getLogs(str).then(data=>{
	// 		const dataSource=data.data.data.data;
	// 		const pagination = { ...this.state.pagination };
	// 		pagination.onShowSizeChange = (current, pageSize) => {
	// 			pagination.pageSize = pageSize;
	// 			pagination.current = current;
	// 			this.setState({ pagination });
	// 			let str=this.getFormValues()+`&pageNum=${current}&pageSize=${pageSize}`
	// 			this.fetch(str);
	// 		}
	// 		pagination.onChange = (current, pageSize) => {
	// 			pagination.pageSize = pageSize;
	// 			pagination.current = current;
	// 			this.setState({ pagination });
	// 			let str=this.getFormValues()+`&pageNum=${current}&pageSize=${pageSize}`
	// 			this.fetch(str);
	// 		}
	// 		pagination.showQuickJumper = true;
	// 		pagination.total = data.data.data.total;
	// 		pagination.showTotal = total => `共 ${total} 条数据`
	// 	            this.setState({
	// 					dataSource:dataSource,
	// 					loading:false,
	// 					pagination
	// 				})

	// 	})
	//     //查询所有的角色
	// 	APIService.getLogTypes().then(data=>{
	// 		const dataSource=data.data.data;
	// 	            this.setState({
	// 					options:dataSource
	// 				})
	// 		 })

	// }

	onSelectedRowKeysChange = selectedRowKeys => {
		this.setState({ selectedRowKeys });
	};

	getFormValues = () => {
		let str = ''
		this.props.form.validateFields((err, values) => {
			for (let key in values) {
				if (values[key]) {
					str += `&${key}=${values[key]}`;
				}
			}
		});
		return str;
	}
	handleSearch = (e) => {
		this.fetch(this.getFormValues());
	};


	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div className="shadow-radius">
				<Form className="search-form" style={{ paddingBottom: 0 }}>
					<Row gutter={24}>
						<Col span={4}>
							<FormItem label="调用人">
								{getFieldDecorator('logUserName')(
									<Input placeholder='请输入调用人' allowClear />
								)}
							</FormItem>
						</Col>
						<Col span={4}>
							<FormItem label="日志类型">
								{getFieldDecorator('logType')(
									<Select placeholder='请选择日志类型' allowClear>
										{this.state.options.map(data => <Option key={data.logTypeId}>{data.logTypeName}</Option>)}
									</Select>
								)}
							</FormItem>
						</Col>
						<Col span={4}>
							<FormItem label="模块">
								{getFieldDecorator('logModular')(
									<Input placeholder='请输入模块' allowClear />
								)}
							</FormItem>
						</Col>
						<Col span={2} style={{ marginRight: '10px', display: 'flex' }} className="serarch-btns">
							<FormItem>
								<Button icon="search" type="primary" htmlType="submit" className={'btn'} onClick={this.handleSearch}>
									查询
								</Button>
							</FormItem>

						</Col>
					</Row>
				</Form>
				<Tabs>
					<TabPane tab={<span><Icon type="table" /><strong>日志管理</strong> </span>} key="1">
						<Table columns={this.state.columns} dataSource={this.state.dataSource} loading={this.state.loading} scroll={{ y: 500 }} pagination={this.state.pagination} rowKey={record => record.logId} />
					</TabPane>

				</Tabs>


			</div>
		);
	}
}

export default Form.create()(withRouter(TableSearch));
